<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米物流信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Toastr style -->
    <link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <!-- Gritter -->

    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

</head>

<body  style="background:#fff">
<div class="row  border-bottom white-bg dashboard-header">
    <!-- 快捷入口 -->
    <div class="c"></div>
    <div class="col-sm-4 col-sm-offset-1">
        <h2>快捷导航</h2>
        <small>可以在这里快速进入操作</small>
        <ul class="list-group clear-list m-t">
            <li class="list-group-item fist-item">
                <span class="label label-success">1</span> 快捷下单
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    10:16 am
                                </span>
                <span class="label label-info">2</span> Sign a contract
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    08:22 pm
                                </span>
                <span class="label label-primary">3</span> Open new shop
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    11:06 pm
                                </span>
                <span class="label label-default">4</span> Call back to Sylvia
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    12:00 am
                                </span>
                <span class="label label-primary">5</span> Write a letter to Sandra
            </li>
        </ul>
    </div>
    <!-- 物流信息 -->
    <div class="col-sm-4 col-sm-offset-1">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>物流信息</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <table class="table table-hover no-margins">
                    <thead>
                    <tr >
                        <th>收货人</th>
                        <th>上货日期</th>
                        <th>收货地址</th>
                        <th>物流信息</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><small>Pending...</small></td>
                        <td><i class="fa fa-clock-o"></i> 11:20pm</td>
                        <td>Samantha</td>
                        <td class="text-navy">已完成 </td>
                    </tr>
                    <tr>
                        <td><span class="label label-warning">Canceled</span> </td>
                        <td><i class="fa fa-clock-o"></i> 10:40am</td>
                        <td>Monica</td>
                        <td class="text-navy label-warning-son">未上货 <!-- <i class="fa fa-level-up"></i> 66%  --></td>
                    </tr>
                    <tr>
                        <td><small>Pending...</small> </td>
                        <td><i class="fa fa-clock-o"></i> 01:30pm</td>
                        <td>John</td>
                        <td class="text-navy">已完成</td>
                    </tr>
                    <tr>
                        <td><small>Pending...</small> </td>
                        <td><i class="fa fa-clock-o"></i> 02:20pm</td>
                        <td>Agnes</td>
                        <td class="text-navy">已完成</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-lg-offset-1">
        <div class="wrapper wrapper-content">
            <div class="row"><div class="col-sm-12">
                    <div class="flot-chart dashboard-chart">
                        <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                    </div>
                    <div class="row text-left">
                        <div class="col-xs-4">
                            <div class=" m-l-md">
                                <span class="h4 font-bold m-t block">$ 406,100</span>
                                <small class="text-muted m-b block">Sales marketing report</small>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <span class="h4 font-bold m-t block">$ 150,401</span>
                            <small class="text-muted m-b block">Annual sales revenue</small>
                        </div>
                        <div class="col-xs-4">
                            <span class="h4 font-bold m-t block">$ 16,822</span>
                            <small class="text-muted m-b block">Half-year revenue margin</small>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- Mainly scripts -->
    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Flot -->
    <script src="../js/plugins/flot/jquery.flot.js"></script>
    <script src="../js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="../js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="../js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="../js/plugins/flot/jquery.flot.pie.js"></script>


    <!-- Custom and plugin javascript -->
    <script src="../js/inspinia.js"></script>
    <script src="../js/plugins/pace/pace.min.js"></script>

    <!-- jQuery UI -->
    <script src="../js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- Toastr -->
    <script src="../js/plugins/toastr/toastr.min.js"></script>


    <script>

            var data1 = [
                [1,8],[2,5],[3,10],[4,4],[5,16],[6,5],[7,11],[8,6],[9,11],[10,30],[11,10],[12,13]
            ];
            var data2 = [
                [1,0],[2,2],[3,0],[4,1],[5,3],[6,1],[7,5],[8,2],[9,3],[10,2],[11,1],[12,0]
            ];
            var data3 = [
                [1,8],[2,8],[3,9],[4,0],[5,43],[6,1],[7,5],[8,2],[9,3],[10,2],[11,2],[12,0]
            ];
            $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
                {data:data1,label:"aaa"},
                {data:data2,label:"bbb"},
                {data:data3,label:"ccc"}
            ],
                    {
                        series: {
                            lines: {
                                show: false,
//                                fill: true,
                                stack:true,
                                bars:{
                                    show:true
                                }
                            },
                            splines: {
                                show: true,
                                tension: 0.4,
                                lineWidth: 1,
                                fill: 0.4
                            },
                            points: {
                                radius: 0,
                                show: true
                            },
                            shadowSize: 2
                        },
                        label:["aaa","bbb","ccc"],
                        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: "#d5d5d5",
                            borderWidth: 1,
                            color: '#d5d5d5'
                        },
                        //更改颜色
                        colors: ["#1ab394", "#464f88"],
//                        colors:["red","yellow","block"],
                        xaxis:{
                        },

                        yaxis: {
                        },
                        tooltip: true
                    }
            );

            var doughnutData = [
                {
                    value: 300,
                    color: "#a3e1d4",
                    highlight: "#1ab394",
                    label: "App"
                },
                {
                    value: 50,
                    color: "#dedede",
                    highlight: "#1ab394",
                    label: "Software"
                },
                {
                    value: 100,
                    color: "#b5b8cf",
                    highlight: "#1ab394",
                    label: "Laptop"
                }
            ];

            var doughnutOptions = {
                segmentShowStroke: true,
                segmentStrokeColor: "#fff",
                segmentStrokeWidth: 2,
                percentageInnerCutout: 45, // This is 0 for Pie charts
                animationSteps: 100,
                animationEasing: "easeOutBounce",
                animateRotate: true,
                animateScale: false
            };
    </script>
</body>
</html>
